<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <!-- 搜索与添加区 -->
      <el-row :gutter="20">
        <el-col :span="7">
          <el-input placeholder="请输入内容">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary">添加用户</el-button>
        </el-col>
      </el-row>

      <!-- 用户列表区 -->
      <el-table :data='userList'>
          <el-table-column lable='姓名' prop='username'></el-table-column>
          <el-table-column lable='邮箱' prop='email'></el-table-column>
          <el-table-column lable='电话' prop='mobile'></el-table-column>
          <el-table-column lable='角色' prop='role_name'></el-table-column>
          <el-table-column lable='状态' prop='mg_state'></el-table-column>
          <el-table-column lable='操作'></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 获取用户列表的对象
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 2,
      },
      userList : [],
      totle : 0
    };
  },
  created() {
    // 获取用户列表数据
    this.getUserList();
  },
  methods: {
    async getUserList() {
      const { data: res } = await this.$http.get("user", {
        params: this.queryInfo,
      });
      // console.log(res);
      if (res.meta.state !== 200) {
          return this.$message.error("获取用户列表失败");
      }
       this.userList = res.data.user,
       this.totle = res.data.totle
    },
  },
};
</script>

<style scoped>
.el-card{
    height: 100% !important;
}
</style>
